<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!-- 
	当你有一些数据需要随着其它数据变动而变动时，也可以用侦听属性 watch
	建议：
	1.能用计算属性的，不要用侦听属性
	2.当需要在数据变化时执行异步或开销较大的操作时，建议用侦听属性。
-->
  <div id="app">
    <h3>当地空气PM25值:{{pm25}}</h3>
    <img :src="pm25img">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        pm25: 21,
        pm25img: "../img/1.png",
      },

      watch: {
        pm25(newValue) {
          let index = 0;
          if (newValue < 100) index = 1;
          else if (newValue < 200) index = 2;
          else if (newValue < 300) index = 3;
          else index = 4;
          this.pm25img = `../img/${index}.png`;
        },
      },
    });
    //测试: 在F12->console->vm.pm25 = 234
  </script>
</body>

</html>